﻿<catel:UserControl x:Class="Catel.Articles.Base.UI.Controls.ExampleControl"
                   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                   xmlns:ViewModels="clr-namespace:Catel.Articles.Base.UI.ViewModels"
                   xmlns:catel="http://catel.codeplex.com"
                   x:TypeArguments="ViewModels:ExampleViewModel">

    <!-- Resources -->
    <UserControl.Resources>
        <!-- Converters -->
        <catel:ReferenceToCollapsingVisibilityConverter x:Key="ReferenceToCollapsingVisibilityConverter" />
    </UserControl.Resources>

    <!-- Content -->
    <ScrollViewer>
        <catel:StackGrid>
            <!-- Row definitions -->
            <catel:StackGrid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </catel:StackGrid.RowDefinitions>

            <!-- Column definitions -->
            <catel:StackGrid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </catel:StackGrid.ColumnDefinitions>

            <!-- Name & run button -->
            <Grid>
                <!-- Column definitions -->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!-- Name -->
                <Label Grid.Column="0">
                    <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                </Label>

                <!-- Run button -->
                <Button Grid.Column="1" Command="{Binding Run}" ToolTip="Run example" Style="{DynamicResource RightAlignedImageButtonStyle}" Margin="0,0,8,0">
                    <Image Source="/Catel.Articles.Base;component/Resources/Images/Run.png" />
                </Button>
            </Grid>

            <!-- Description -->
            <Label>
                <TextBlock Text="{Binding Description}" TextWrapping="Wrap" />
            </Label>

            <!-- Image -->
            <GroupBox Header="Image" Visibility="{Binding ImageSource, Converter={StaticResource ReferenceToCollapsingVisibilityConverter}}">
                <Image Source="{Binding ImageSource}" Stretch="Uniform" StretchDirection="DownOnly" />
            </GroupBox>

            <!-- Code -->
            <GroupBox Header="Code">
                <TextBox Text="{Binding Code, Mode=OneWay}" IsReadOnly="True" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto" />
            </GroupBox>
        </catel:StackGrid>
    </ScrollViewer>
</catel:UserControl>
